<template>
    <div class="pricing-number">
        <!-- <input type="text" :value="content" v-model="content" oninput="value=value.replace(/[^0-9.]/g,'')" @focus="inputFocus($event)" @change="inputChange($event)" /> -->
        <input type="text" ref="input" @input="onInput($event)" @focus="inputFocus($event)" @blur="inputBlur($event)" @change="inputChange($event)" />
        <em v-text="unit"></em>
    </div>
</template>

<script>
export default {
    name: "PricingInput",
    props: {
        value: { type: [Number, String], required: true },
        unit: { type: String, required: false },
        fixed: { type: Number, default: 1 },
        precision: { type: Number, default: 0 },
        fill: { type: String, default: '' }, // 是否允许为空
    },
    data () {
        return {
            content: '',
            lock: false,
        };
    },
    watch: {
        value: {
            immediate: true,
            handler () {
                this.setValue();
            }
        }
    },

    methods: {
        mathMound (value, n) {
            n = n === undefined ? 1 : n;
            let bei = Math.pow(10, n);
            let res = Math.round(value * bei) / bei;
            return +parseFloat(res.toPrecision(12));
        },
        setValue () {
            if (!this.$refs.input) {
                // 不管
            } else {

                const input = this.$refs.input
                const value = String(this.value);
                const real = value.replace(/[\d\.]+/gi, (str) => {
                    const value = parseFloat(str) * this.fixed;
                    const format = this.mathMound(value, this.precision)
                    return format.toFixed(this.precision)
                })
                if (value.match(/[^0-9.]/g)) {
                    // 非数字
                    if (input.value != this.value) {
                        input.value = real;
                    }
                } else if (parseFloat(real) == parseFloat(input.value)) {
                    // 相同的不覆盖
                } else {
                    input.value = real;
                }
            }
        },

        inputFocus (event) {
            // this.lock = true;
            event.currentTarget.select();
        },

        inputBlur (event) {
            // this.lock = false;
            // 填充
            if (!this.$refs.input) {
                // 不管
            } else {
                const input = this.$refs.input;

                // 填充
                if (input.value === '' && this.fill) {
                    input.value = this.fill;
                }

                // 末尾...的情况
                if (/\.+$/.test(input.value)) {
                    input.value = input.value.replace(/\.+$/, '')
                }

                // 有内容时，格式化
                if (input.value) {
                    input.value = parseFloat(input.value).toFixed(this.precision)
                }
            }

        },
        inputChange (event) {
            this.$emit("change", event);
            this.inputBlur();
        },

        onInput (event) {
            const reg = this.precision > 0 ? /[^0-9.]/g : /[^0-9]/g;
            let value = event.target.value || '';

            value = value.replace(reg, ''); // 删除数字和.以外的内容
            value = value.replace(/\.+/, '.'); // 连续多个点: 1...
            value = (value.match(/\./g) || []).length > 1 ? value.split('.').slice(0, 2).join('.') : value; // 间隔多个点: 1.2.3.
            value = /^\.+/.test(value) ? value.replace(/^\.+/, '') : value; // 纯点的情况:...
            value = value.replace(/\.\d+/, s => s.substring(0, this.precision + 1)); // 处理后面好多个0
            value = value.replace(/^0+(\d)/, '$1'); // 处理前面好多个0的情况

            event.target.value = value;

            this.$emit("input", this.mathMound(value / this.fixed, this.precision));
        }
    },
    mounted () {
        this.setValue();
    }
};
</script>
<style lang="scss" scoped>
.pricing-number {
    position: relative;
    display: flex;
    flex-direction: column;

    input {
        width: 100%;
        height: 32px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
        box-sizing: border-box;
        padding: 6px 36px 6px 12px;
        font-size: 14px;

        color: #000000;

        &:hover {
            border-color: #f6b2cd;
        }

        &:focus {
            border-color: #ea4c89;
        }

        &[disabled] {
            background: #f6f6f6;

            ~ b {
                color: rgba(0, 0, 0, 0.2);
            }
        }
    }

    em {
        position: absolute;
        right: 0;
        bottom: 0;
        height: 32px;
        line-height: 32px;
        right: 28px;
        font-size: 14px;

        color: #aaaaaa;
        pointer-events: none;
    }
}
</style>
